/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-04-13 20:57:29
 * @LastEditTime: 2023-07-19 15:44:44
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Box,
  Center,
  // Heading,
  Icon,
  IconButton,
  Image,
  Spinner,
  // Text,
} from '@chakra-ui/react';
import { memo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaTrashAlt } from 'react-icons/fa';
import { MdCheckCircle, MdOutlineError } from 'react-icons/md';

import { FilePreview, TUploadState } from '.';

interface UploadImageViewProps {
  file: FilePreview;
  uploadState: TUploadState;
  errorListUploadState: TUploadState;
  isUploaded: boolean;
  isError: boolean;
  index: number;
  deleteimage: () => void;
}

const memoEqualityCheck = (
  prev: UploadImageViewProps,
  next: UploadImageViewProps
) =>
  prev.file.name === next.file.name &&
  prev.index === next.index &&
  prev.file.preview === next.file.preview &&
  prev.uploadState === next.uploadState &&
  prev.deleteimage === next.deleteimage &&
  prev.isError === next.isError &&
  prev.isUploaded === next.isUploaded &&
  prev.errorListUploadState === next.errorListUploadState;

const UploadImageView = memo((props: UploadImageViewProps) => {
  const {
    file,
    uploadState,
    deleteimage,
    isUploaded,
    isError,
    errorListUploadState,
  } = props;
  const { name, preview } = file;
  const { t } = useTranslation();
  const [isHovered, setIsHovered] = useState<boolean>(false);
  const handleMouseOver = () => setIsHovered(true);
  const handleMouseOut = () => setIsHovered(false);
  return (
    <Box
      m={3}
      width="7rem"
      height="7rem"
      position="relative"
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
      userSelect="none"
    >
      {isError && (
        <Center inset={0} position="absolute">
          <Icon
            borderRadius="full"
            backgroundColor="white"
            color="error.600"
            as={MdOutlineError}
            fontSize="1.3rem"
          />
        </Center>
      )}
      <Center top={1} right={1} position="absolute">
        {uploadState !== 'uploading' && !isUploaded && isHovered && (
          <IconButton
            aria-label={t('parameters.deleteImage')}
            icon={<FaTrashAlt />}
            size="xs"
            onClick={deleteimage}
            variant="imageHoverIconButton"
            fontSize={14}
          />
        )}
        {isUploaded && (
          <Icon
            borderRadius="full"
            backgroundColor="white"
            color="accent.700"
            as={MdCheckCircle}
            fontSize="1.3rem"
          />
        )}
        {(uploadState === 'uploading' ||
          errorListUploadState === 'uploading') &&
          !isUploaded && (
            <Spinner size="sm" thickness="5px" speed="1s" color="accent.700" />
          )}
      </Center>

      <Image
        objectFit="cover"
        borderRadius="md"
        alt={name}
        width="7rem"
        height="7rem"
        src={preview}
      />
    </Box>
  );
}, memoEqualityCheck);

UploadImageView.displayName = 'UploadImageView';
export default UploadImageView;
